<template>

    <div class="mars-m-style">
        <blockIndexNavBar title="工资查询"></blockIndexNavBar>
        <van-row>
            <van-col span="16">
                <van-search
                    placeholder="请输入姓名"
                    v-model="searchCondition"
                    @search="onSearch"
                >
                </van-search>
            </van-col>
            <van-col span="8" class="search-btn">
                <van-button type="primary" size="small" @click="onSearch">搜索</van-button>
            </van-col>
        </van-row>
        <van-dropdown-menu>
            <van-dropdown-item title="筛选" ref="item">
                <van-cell title="工资月份:" :value="date" @click="show = true"/>
                <van-calendar v-model="show" type="range" @confirm="onDateConfirm" :show-confirm="false"
                              :min-date="minDate"/>
                <div style="padding: 5px 16px;">

                    <van-row>
                        <van-col span="12" style="padding-right: 10px;  ">
                            <van-button type="danger" size="mini" block round @click="onConfirm">
                                确认
                            </van-button>
                        </van-col>
                        <van-col span="11">
                            <van-button type="danger" size="mini" block round @click="reset">
                                重置
                            </van-button>
                        </van-col>
                    </van-row>
                </div>
            </van-dropdown-item>
        </van-dropdown-menu>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="getData"
            >
                <lee-card v-for="(item,index) in dataList" :key="item._id">
                    <van-cell-group @click="onClick(item)">
                        <van-cell title="姓名" :value="item.true_name"/>
                        <van-cell title="所在部门" :value=" item.d_name "/>
                        <van-cell title="工资月份" :value="tabformatDate(item.salary_year)  "/>
                        <van-cell title="本月实发工资" :value="item.实发工资"/>
                    </van-cell-group>
                    <van-collapse v-model="activeNames">
                        <van-collapse-item title="详细内容" :name="index">
                            <div v-for="(fie,key) in fields" :key="key">
                                <van-row>
                                    <van-col span="12">{{ fie['name'] }}</van-col>
                                    <van-col span="12">{{ item[fie['field']] }}</van-col>
                                </van-row>
                            </div>

                        </van-collapse-item>
                    </van-collapse>
                </lee-card>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
import {Config} from "@/config/formDataOptions";
import blockIndexNavBar from "@/components/blockIndexNavBar";
import LeeCard from "@/uitl/card";
import {API_URL, HREF_URL} from "../../../config/urlInfo";


export default {
    name: "salaryList",
    components: {
        LeeCard,
        blockIndexNavBar,
    },
    data() {
        return {
            activeNames: ['1'],
            minDate: new Date(1990, 0, 1),
            searchCondition: "",
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            dataList: [],
            date: '',
            show: false,
            currentPage: 1,
            fields: [],
            isShowimg: false,
            salaryMonthList: [],
            deductionList: [],
        };
    },
    mounted() {
        this.getFields()
        // this.getData()
    },
    methods: {
        cli() {
            console.log("xx1111")
        },
        onClick(row) {
            console.log("rowrowrowrow", row)
            this.salaryMonthList.length = 0
            this.deductionList.length = 0
            let aloneList = ["养老保险个人支付", "医疗保险个人支付", "失业保险个人支付", "住房公积金个人支付", "企业年金个人支付"];
            Config.getDatas(API_URL.salarySearch, {
                uuid: row.uuid,
                uid: row.uid,
                salary_year: row.salary_year
            }, res => {
                let sa = row.salary_month
                let deduction = row.deduction  //抵扣项
                let data = [
                    {"fileName": "当月兑付", "value": sa['当月兑付']},
                    {"fileName": "应发绩效", "value": sa['应发绩效']},
                    {"fileName": "实发绩效", "value": sa['实发绩效']},
                    {"fileName": "实发工资", "value": sa['实发工资']},
                    {"fileName": "应发工资", "value": sa['应发工资']},
                    {"fileName": "其他杂项实发金额", "value": sa['其他杂项实发金额']},
                    {"fileName": "本月实发", "value": sa['本月实发']}
                ]
                this.countArr = data
                // if (!this.isUserAdmin) {
                delete sa["医疗保险企业支付"]
                delete sa["养老保险企业支付"]
                delete sa["失业保险企业支付"]
                delete sa["工伤保险企业支付"]
                delete sa["生育保险企业支付"]
                delete sa["住房公积金企业支付"]
                delete sa["企业年金企业支付"]
                delete sa["其他杂项实发金额"]
                delete sa["uuid"]
                // delete sa["其他杂项实发金额"]
                // delete sa["本月实发"]
                // delete sa["当月兑付"]
                // delete sa["应发绩效"]
                // delete sa["实发绩效"]
                // }
                this.salary_month = sa
                delete sa["本月实发"]
                delete sa["当月兑付"]
                delete sa["应发绩效"]
                delete sa["实发绩效"]

                aloneList.forEach(item => {
                    deduction[item] = sa[item]
                })
                for (let saKey in sa) {
                    if (typeof deduction[saKey] != "undefined") {
                        this.deductionList.push({"fileName": saKey, "value": sa[saKey]})
                    } else {
                        if (saKey.indexOf("（内退）") == -1) {
                            this.salaryMonthList.push({"fileName": saKey, "value": sa[saKey]})
                        }
                    }
                }
                if (res.salaryPerformance != null) {
                    this.salaryPerformance = res.salaryPerformance
                }
                if (res.deferredAccount != null) {
                    this.deferredAccount = res.deferredAccount
                }
                if (res.payBack != null) {
                    this.payBack = res.payBack
                }
                console.log(res.redemptionDetails)
                if (res.redemptionDetails.length > 0) {
                    this.redemptionDetails = res.redemptionDetails
                }
                if (res.DeferredPaymentBean != null) {
                    this.DeferredPaymentBean = res.DeferredPaymentBean
                }
                if (res.otherMiscellaneousArr != null) {
                    this.otherMiscellaneousArr = res.otherMiscellaneousArr
                }
                // this.$router.push({path: "/hr-mobile/salaryInfo", params: {userId: 123}})
                this.$router.push({
                    path: HREF_URL.salaryInfo, query: {
                        salaryMonthList: this.salaryMonthList,
                        deferredAccount: this.deferredAccount,
                        payBack: this.payBack,
                        countArr: this.countArr,
                        otherMiscellaneousArr: this.otherMiscellaneousArr,
                        salaryPerformance: this.salaryPerformance,
                        DeferredPaymentBean: this.DeferredPaymentBean,
                        redemptionDetails: this.redemptionDetails,
                        deductionList: this.deductionList,
                    }
                })
            }, this)
            // console.log("rowrowrow", row)
        },
        // 点击按钮
        handleIcons(router) {
            console.log('router', router)
            this.$router.push({path: "/mobile/offices/claim/articleClaim"})
        },

        getFields() {
            // Config.getDatas("/hr/api/salary/getSalaryItemListAndTaxe", {}, res => {
            Config.getDatas(API_URL.salaryItemListAndTaxe, {}, res => {
                this.fields = res
            }, this)
        },
        formatDate(date) {
            console.log(date.getFullYear())
            return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        },
        onDateConfirm(date) {
            const [start, end] = date;
            this.show = false;
            this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
            this.getData()
        },
        reset() {
            this.date = ""
            this.getData()
        },
        onConfirm() {
            this.$refs.item.toggle();
        },
        tabformatDate(item) {
            let data = item
            if (data == null || data === '') {
                return ""
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1)
        },
        onSearch() {
            this.dataList.length = 0
            this.getData()
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.dataList = [];
            this.currentPage = 1;
            this.getData();
        },

        getData() {
            Config.getDatas(API_URL.salaryList, {
                data: {
                    size: 15,
                    page: this.currentPage,
                    userName: this.searchCondition,
                    redemptionDate: this.date
                }
            }, (res) => {
                let list = res.data
                this.loading = false;
                this.refreshing = false;
                if (!list || list.length < 15) {
                    this.finished = true;
                } else {
                    this.currentPage++;
                    this.finished = false;
                }
                this.dataList.push(...list)
            }, this)
        }
    }
}
</script>

<style scoped lang="less">
.search-btn {
    .van-button {
        width: 48%;
        margin-right: 1%;
    }

    background: #fff;
    text-align: center;
    padding: 11px 0;
}

.list-btn {
    .van-button {
        width: 45%;
        margin-right: 2%;
        float: right;
    }
}

.wt-card {
    margin: 0.4rem;
    background: #fff;
    overflow: hidden;
    border-radius: 0.3rem;
    padding: 0.4rem;
    box-shadow: 0 0 0.2rem #ccc;
    border-bottom: 0.1rem solid #ccc;
}


.icons-warp {
    border-radius: 25px;

    .float-icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 50px;
        height: 50px;

        img {
            width: 25px;
            height: 25px;
            margin-bottom: 3px;
        }

        span {
            font-size: 9px;
            color: #666666;
        }
    }
}

</style>
